<template>
  <div class="project-management-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h2>项目管理表格</h2>
      </div>

      <el-form :model="projectForm" label-width="120px" label-position="left">
        <!-- 基本信息行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="专项名称">
              <el-input v-model="projectForm.specialName" placeholder="请输入专项名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目1">
              <el-input v-model="projectForm.project1" placeholder="请输入项目1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目编号">
              <el-input v-model="projectForm.projectCode" placeholder="请输入项目编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行信息 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="主责人">
              <el-input v-model="projectForm.principal" placeholder="请输入主责人" value="张三"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态">
              <el-select v-model="projectForm.status" placeholder="请选择状态">
                <el-option label="进行中" value="processing"></el-option>
                <el-option label="已完成" value="completed"></el-option>
                <el-option label="已取消" value="canceled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下拉菜单">
              <el-select v-model="projectForm.dropdown" placeholder="请选择">
                <el-option label="选项1" value="option1"></el-option>
                <el-option label="选项2" value="option2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 改善类型行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="改善类型">
              <el-select v-model="projectForm.improvementType" placeholder="请选择改善类型">
                <el-option label="S级" value="S"></el-option>
                <el-option label="A级" value="A"></el-option>
                <el-option label="B级" value="B"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="专项状态">
              <el-select v-model="projectForm.specialStatus" placeholder="请选择专项状态">
                <el-option label="S级" value="S"></el-option>
                <el-option label="A级" value="A"></el-option>
                <el-option label="B级" value="B"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="立项日期">
              <el-date-picker
                  v-model="projectForm.startDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-value="new Date(2025, 0, 12)">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 激励信息行 -->
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="激励申请">
              <el-input-number v-model="projectForm.incentiveApply" :min="0" :step="100"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目奖励">
              <el-input-number v-model="projectForm.projectReward" :min="0" :step="100"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="实发奖励">
              <el-input-number v-model="projectForm.actualReward" :min="0" :step="100"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="结项日期">
              <el-date-picker
                  v-model="projectForm.endDate"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :default-value="new Date(2025, 11, 12)">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 团队成员 -->
        <el-form-item label="团队成员">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入团队成员，多个成员用逗号分隔"
              v-model="projectForm.teamMembers">
          </el-input>
        </el-form-item>

        <!-- 改善背景 -->
        <el-form-item label="改善背景">
          <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入改善背景"
              v-model="projectForm.improvementBackground">
          </el-input>
        </el-form-item>

        <!-- 改善目标 -->
        <el-form-item label="改善目标">
          <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入改善目标"
              v-model="projectForm.improvementGoal">
          </el-input>
        </el-form-item>

        <!-- 改善方案 -->
        <el-form-item label="改善方案">
          <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入改善方案"
              v-model="projectForm.improvementPlan">
          </el-input>
        </el-form-item>

        <!-- 项目达成 -->
        <el-form-item label="项目达成">
          <el-input
              type="textarea"
              :rows="3"
              placeholder="请输入项目达成情况"
              v-model="projectForm.projectAchievement">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projectForm: {
        specialName: '',
        project1: '项目1',
        projectCode: '',
        principal: '张三',
        status: '',
        dropdown: '',
        improvementType: 'S',
        specialStatus: 'S',
        startDate: '2025-01-12 00:00:00',
        incentiveApply: 100,
        projectReward: 100,
        actualReward: 100,
        endDate: '2025-12-12 00:00:00',
        teamMembers: '',
        improvementBackground: '',
        improvementGoal: '',
        improvementPlan: '',
        projectAchievement: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$message({
        message: '提交成功',
        type: 'success'
      });
      console.log('提交数据:', this.projectForm);
    },
    resetForm() {
      this.projectForm = {
        specialName: '',
        project1: '项目1',
        projectCode: '',
        principal: '张三',
        status: '',
        dropdown: '',
        improvementType: 'S',
        specialStatus: 'S',
        startDate: '2025-01-12 00:00:00',
        incentiveApply: 100,
        projectReward: 100,
        actualReward: 100,
        endDate: '2025-12-12 00:00:00',
        teamMembers: '',
        improvementBackground: '',
        improvementGoal: '',
        improvementPlan: '',
        projectAchievement: ''
      };
      this.$message({
        message: '重置成功',
        type: 'info'
      });
    }
  }
}
</script>

<style scoped>
.project-management-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.clearfix {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-form-item {
  margin-bottom: 22px;
}
</style>